import * as React from 'react';
import classNames from 'classnames';
import { Icon, Anim } from '../index'
import './style/index.less'

interface menuDataItem {
  iconType: string;
  iconColor: string,
  menuKey: string
}

interface FloatMenuProps {
  prefixCls: string;
  menuData?: Array<menuDataItem>;
  handleClickEvent: any
}

interface FloatMenuState {
  isShow: boolean,
  isOpen: boolean
}

class FloatMenu extends React.Component<FloatMenuProps, FloatMenuState> {
  static defaultProps = {
    prefixCls: 'addon-layui-float-menu'
  }
  constructor(props: FloatMenuProps) {
    super(props);
    this.state = {
      isShow: true,
      isOpen: true
    };
  }

  scrollPosition: number = 0

  componentDidMount() {
    this.scrollPosition = window.scrollY;
    window.addEventListener('scroll', () => {
      let after = window.scrollY;
      // console.log(this.scrollPosition, after);
      if (after > this.scrollPosition) { // 向下
        this.setState({
          isShow: false,
          isOpen: false
        });
      } else {
        this.setState({
          isShow: true
        })
      }
      this.scrollPosition = after;
    })
  }

  render() {

    const {
      prefixCls,
      handleClickEvent,
      menuData
    } = this.props;

    const classes = classNames(prefixCls, {
      [`${prefixCls}-body`]: true,
      'layui-anim': true,
      'layui-anim-up': true
    });

    const subCls = classNames(`${prefixCls}-sublist`, {
      'layui-anim': true,
      'layui-anim-fadein': true
    })

    if (!this.state.isShow) return null;
    return (
      <div className={classes} onClick={() => {
        handleClickEvent();
      }}>
        <div className={`${prefixCls}-main`} onClick={() => {
          this.setState({ isOpen: !this.state.isOpen });
        }}>
          <Icon type="app" />
        </div>
        {
          menuData && this.state.isOpen ?
            <div className={`${subCls}`}>
              {
                menuData.map((item: menuDataItem) => {
                  return <div className={`${prefixCls}-subitem`} key={item.menuKey}>
                    <div className={`${prefixCls}-subitem-main`} style={{ color: item.iconColor }}>
                      <Icon type={item.iconType} />
                    </div>
                  </div>;
                })
              }
            </div> :
            ''
        }
      </div >
    )
  }
}
export default FloatMenu;